{% extends 'layout/manage.html' %}
 {% load static %} 
{% block css %}
<link
  rel="stylesheet"
  href="{% static 'plugin\editor-md\css\editormd.min.css' %}"
/>
<link
  rel="stylesheet"
  href="{% static 'plugin/bootstrap-datepicker/css/bootstrap-datepicker.min.css' %}"
/>
<link
  rel="stylesheet"
  href="{% static 'plugin/bootstrap-select/css/bootstrap-select.min.css' %}"
/>

<style>
  .issues-list .number {
    width: 100px;
    text-align: right;
  }

  .issues-list .number a {
    font-weight: 500;
    padding: 0 10px;
  }

  .issues-list .issue .tags {
    padding: 10px 0;
  }

  .issues-list .issue .tags span {
    margin-right: 20px;
    display: inline-block;
    font-size: 12px;
  }

  .issues-list .issue .tags .type {
    color: white;
    padding: 1px 5px;
    border-radius: 5px;
    background-color: #dddddd;
  }

  .editormd {
    margin-bottom: 0;
  }

  .pd-0 {
    padding: 0 !important;
  }

  /* 筛选 */
  .filter-area .item {
    margin-bottom: 15px;
  }

  .filter-area .item .title {
    padding: 5px 0;
  }

  .filter-area .item .check-list a {
    text-decoration: none;
    display: inline-block;
    min-width: 65px;
  }

  .filter-area .item .check-list label {
    font-weight: 200;
    font-size: 13px;
    margin-left: 3px;
  }

  .filter-area .item .check-list a:hover {
    font-weight: 300;
  }

  .filter-area .item .check-list .cell {
    margin-right: 10px;
  }
</style>
{% endblock %} 
{% block content %}
<div class="container-fluid clearfix" style="padding: 20px 0">
  <div class="col-sm-3">
    <div class="panel panel-default">
      <div class="panel-heading">
        <i class="fa fa-search" aria-hidden="true"></i> 筛选
      </div>
      <div class="panel-body">筛选选项</div>
    </div>
  </div>
  <div class="col-sm-9">
    <div class="panel panel-default">
      <div class="panel-heading">
        <i class="fa fa-quora" aria-hidden="true"></i> 问题
      </div>
      <div class="panel-body">
        <a
          class="btn btn-success btn-sm"
          data-toggle="modal"
          data-target="#addModal"
          >新建问题</a
        >
        <a
          class="btn btn-primary btn-sm"
          data-toggle="modal"
          data-target="#inviteModal"
          >邀请成员</a
        >
      </div>
      <table class="table">
        <tbody class="issues-list">
          <tr>
            <td class="number">
              <i class="fa fa-circle text-danger"></i>
              <a href="#">#10</a>
            </td>
            <td class="issue">
              <div>
                <a href="#">测试</a>
              </div>
              <div class="tags">
                <span class="type"> 功能 </span>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <nav aria-label="Page navigation">
      <ul class="pagination" style="padding: 20px 0">
        <li>
          <a href="#" aria-label="Previous">
            <span aria-hidden="true">«</span>
          </a>
        </li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li>
          <a href="#" aria-label="Next">
            <span aria-hidden="true">»</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>
<!-- 新建问题模态框 -->
<div
  id="addModal"
  class="modal fade"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myLargeModalLabel"
>
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">新建问题</h4>
      </div>
      <div class="modal-body" style="padding-right: 40px">
        <form id="addForm" class="form-horizontal">
          {% csrf_token %}
          <div class="form-group">
            <label
              for="{{ form.issues_type.id_for_label }}"
              class="col-sm-2 control-label"
              >{{ form.issues_type.label }}</label
            >
            <div class="col-sm-10">
              {{form.issues_type}}
              <span class="error-msg">{{form.issues_type.error.0}}</span>
            </div>
          </div>
          <div class="form-group">
            <label
              for="{{ form.subject.id_for_label }}"
              class="col-sm-2 control-label"
              >{{ form.subject.label }}</label
            >
            <div class="col-sm-10">
              {{form.subject}}
              <span class="error-msg">{{form.subject.error.0}}</span>
            </div>
          </div>
          <div class="form-group">
            <label
              for="{{ form.module.id_for_label }}"
              class="col-sm-2 control-label"
              >{{ form.module.label }}</label
            >
            <div class="col-sm-10">
              {{form.module}}
              <span class="error-msg">{{form.module.error.0}}</span>
            </div>
          </div>
          <div class="form-group">
            <label
              for="{{ form.desc.id_for_label }}"
              class="col-sm-2 control-label"
              >{{ form.desc.label }}</label
            >
            <div class="col-sm-10">
              <div id="editor">{{form.desc}}</div>
              <span class="error-msg">{{form.desc.error.0}}</span>
            </div>
          </div>

          <div class="form-group clearfix">
            <div class="col-md-6 pd-0">
              <label
                for="{{ form.status.id_for_label }}"
                class="col-md-4 control-label"
                >{{ form.status.label }}</label
              >
              <div class="col-md-8 clearfix">
                <div>{{ form.status }}</div>
                <div class="error-msg"></div>
              </div>
            </div>
            <div class="col-md-6 pd-0">
              <label
                for=" {{ form.priority.id_for_label }}"
                class="col-md-4 control-label"
                >{{ form.priority.label }}</label
              >
              <div class="col-md-8">
                <div>{{ form.priority }}</div>
                <div class="error-msg"></div>
              </div>
            </div>
          </div>

          <div class="form-group clearfix">
            <div class="col-md-6 pd-0">
              <label
                for="{{form.assign.id_for_label}}"
                class="col-md-4 control-label"
                >{{form.assign.label}}</label
              >
              <div class="col-md-8">
                {{ form.assign }}
                <div class="error-msg"></div>
              </div>
            </div>

            <div class="col-md-6 pd-0">
              <label
                for="{{form.participant.id_for_label}}"
                class="col-md-4 control-label"
                >{{form.participant.label}}</label
              >
              <div class="col-md-8">
                {{ form.participant }}

                <div class="error-msg"></div>
              </div>
            </div>
          </div>

          <div class="form-group clearfix">
            <div class="col-md-6 pd-0">
              <label
                for=" {{ form.start_date.id_for_label }}"
                class="col-md-4 control-label"
              >
                {{ form.start_date.label }}</label
              >
              <div class="col-md-8">
                <div class="input-group">
                  <span class="input-group-addon" id="sizing-addon2">
                    <i class="fa fa-calendar" aria-hidden="true"></i>
                  </span>
                  {{ form.start_date }}
                </div>
                <span class="error-msg"></span>
              </div>
            </div>

            <div class="col-md-6 pd-0">
              <label
                for=" {{ form.end_date.id_for_label }}"
                class="col-md-4 control-label"
                >{{ form.end_date.label }}</label
              >
              <div class="col-md-8">
                <div class="input-group">
                  <span class="input-group-addon" id="sizing-addon2">
                    <i class="fa fa-calendar" aria-hidden="true"></i>
                  </span>
                  {{ form.end_date }}
                </div>
                <span class="error-msg"></span>
              </div>
            </div>
          </div>
          <div class="form-group clearfix">
            <div class="col-md-6 pd-0">
              <label
                for="{{ form.mode.id_for_label }}"
                class="col-md-4 control-label"
                >{{ form.mode.label }}</label
              >
              <div class="col-md-8">
                <div>{{ form.mode }}</div>
                <div class="error-msg"></div>
              </div>
            </div>

            <div class="col-md-6 pd-0">
              <label
                for="{{ form.parent.id_for_label }}"
                class="col-md-4 control-label"
                >{{ form.parent.label }}</label
              >
              <div class="col-md-8">
                {{ form.parent }}

                <div class="error-msg"></div>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
          取 消
        </button>
        <button type="button" class="btn btn-primary">添 加</button>
      </div>
    </div>
  </div>
</div>
{% endblock %} {% block js %}
<script src="{% static 'plugin\editor-md\editormd.min.js' %}"></script>
<script src="{% static 'plugin/bootstrap-datepicker/js/bootstrap-datepicker.min.js' %}"></script>
<script src="{% static 'plugin/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js' %}"></script>
<script src="{% static 'plugin/bootstrap-select/js/bootstrap-select.min.js' %}"></script>
<script src="{% static 'plugin/bootstrap-select/js/i18n/defaults-zh_CN.min.js' %}"></script>
<script>
  $(function () {
    bindBootStrapShownEvent();
    initDatePicker();
  });

  /*
    添加对话框：初始化时间选择
    */
  function initDatePicker() {
    $("#id_start_date,#id_end_date").datepicker({
      format: "yyyy-mm-dd",
      startDate: "0",
      language: "zh-CN",
      autoclose: true,
    });
  }
  function bindBootStrapShownEvent() {
    $("#addModal").on("shown.bs.modal", function (event) {
      // 对话框弹出时，内容触发。
      initEditorMd();
    });
  }
  function initEditorMd() {
    editormd("editor", {
      placeholder: "请输入内容",
      height: 300,
      path: "{% static 'plugin/editor-md/lib/' %}",
    });
  }
</script>
{% endblock %}
